<template>
  <a class="tab-item" @click="$parent.$emit('input',id)" :class="{ 'is-selected': $parent.value === id }">
    <div class="tab-item-icon">
      <slot name="icon"></slot>
    </div>
    <div class="tab-item-label"><slot></slot></div>
  </a>
</template>
<script>
  export default {
    name: 'tab-item',
    props: ['id']
  }
</script>
<style lang="scss" scoped>
@import '../../common/style/mixin.scss';
.tab-item {
  display: block;
  flex: 1;
  text-decoration: none;
  .tab-item-icon {
    height: 1.6rem;
    margin: 0 auto;
    &:empty {
      display: none;
    }
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .tab-item-label {
    color: inherit;
    font-size: $tab-item-font-size;
    line-height: 1;
  }
}
</style>
